<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.milkyWay {
background-image: linear-gradient(to top, #FeFeFe 0%, #f6f6f6 100%);
}

.logo-sec{
  padding-top: 0.5em;
  text-align: center;
  .milkyWay;
  .logo{
    height:5em;
  }
  .logotext{
    height:2em;
  }
}
.hot{
  margin:0.5em;
  margin-bottom: 1.5em;
  .title{
    background-color:#82C2E6;
    border-radius: 0.5em; 
    font-size: 0.95em;
    width:4.2em;
    padding: 0.1em 0.6em;
    color: white;
    // margin-bottom: 0.1em;
  }
  .info{
    padding: 0 1em;
    justify-content: space-between;
  }
}
.self{

  .card{
    margin:0.5em;
    text-align: center;
    color:white;
    border-radius: 0.5em;
    .title{
      font-size: 1.25em;
      width:5em;
      border-radius: 0.25em;
      margin:0 auto;
      box-shadow:3px 3px 4px #666;
    }
    .sub-title{
      font-size: 0.8em;
      white-space:nowrap;
      margin-top: 14px;
    }
    .block{
      margin:0.5em;
      padding: 0.4em 0;
      background-color: white;
      border-radius: 0.2em;
      .price{
        color:#875F17;
        font-size: 1.2em;
        margin-bottom: 0.6em;
      }
      .btn{
        margin:1em;
        padding: 0.2em 0.5em;
      }
    }
  }
  .card-blue{
    background-color: #ACD6EE;
    margin-left: 0.8em;
    margin-right:0.4em;
    .title{
      background-color: #82C2E6;
    }
    h4{
      color: #628CBC;
    }
    .btn{
      background-color: #7EAFE7;
    }
  }
  .card-green{
    background-color: #CBDC98;
    margin-left:0.4em;
    margin-right:0.8em;
    .title{
      background-color: #7CA700;
    }
    h4{
      color: #7EA701;
    }
    .btn{
      background-color: #7CA700;
    }
  }
}
.button-group{
  padding: 0.5em 1.5em;
}
.weui-grid{
  
}
</style>

<<style lang="less" scoped>
.weui-grids:before{
  border-top:none !important;
}
.weui-grids:after{
  border-left:none !important;
}
.weui-grid:before{
  border-right:none !important;
  
}
.weui-grid:after{
  border-bottom:none !important;
  
}
</style>

<template>
  <div class="">
    <div class="logo-sec">
      <img src="static/image/yililogo.png" class="logo"/><br/>
      <img src="static/image/logotext.png" class="logotext"/>
    </div>
    <swiper :list="swiperData" auto></swiper>
    <div class="bar"></div>
    <grid :cols="4" class="mygrid">
      <grid-item :label="x.text" v-for="(x,i) in gridData" :key="i" @click.native="onGridClick(x)">
        <img slot="icon" :src="x.src">
      </grid-item>
    </grid>
  
    <div class="hot">
      <div class="title">活动公告</div>

      <marquee>
        <marquee-item v-for="i in 5" :key="i" @click.native="alert('没有最好，只有更好')" class="align-middle">
          <div class="info ub">
            <div>伊利通信社区正式上线！</div>
            <div>2018-01-08</div>
          </div>
          </marquee-item>
      </marquee>
    </div>
    <div class="self ub">
      <div class="card uf-1 card-blue" @click="jump('OrderSearch')">
        <div class="title">腾讯王卡</div>
        <div class="sub-title">首次充50得120<br/>其他流量1元/500MB</div>
        <div class="block">
          <div class="price">仅需 19 元 / 月</div>
          <h4>腾讯应用全国免费</h4>
          <h4>流量全免费</h4>
          <div class="btn">一分钟办理</div>
        </div>
      </div>
      <div class="card uf-1 card-green" @click="jump('OrderAdd')">
        <div class="title">员工卡</div>
        <div class="sub-title">流量2.5G/4.8G<br/>语音100/200分钟</div>
        <div class="block">
          <div class="price">仅需 35 元 / 月</div>
          <h4>赠送</h4>
          <h4>宿舍无线宽带</h4>
          <div class="btn">一分钟办理</div>
        </div>
      </div>
    </div>
    <div class="button-group">
      <x-button :gradients="['#e8e8e8', '#e8e8e8']" @click.native="done('tel:18647103205')"><div style="color:#868686;">联系客户经理</div></x-button>
    </div>
  </div>
</template>

<script>
import { Swiper, Grid, GridItem, Panel,XButton,Marquee, MarqueeItem } from 'vux'
export default {
  data() {
    return {
      swiperData: [
        {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }, {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }
      ],
      gridData:[
        {
          text:'企业卡',
          src:'static/image/qyk.png',
          link:'/business-card'
        },
        {
          text:'光纤宽带',
          src:'static/image/kd.png',
          link:'/broadband'
        },
        {
          text:'自助专区',
          src:'static/image/ziz.png',
          link:'/self-help'
        },
        {
          text:'社区服务',
          src:'static/image/sqfw.png',
          link:'/community',
          // url:'https://tieba.baidu.com/index.html'
        },
       
      ],
     
    }
  },
  methods: {
    onImgError(item, $event) {
      console.log(item, $event)
    },
    onGridClick(item){
      if(item.func){
        console.log(item.func)
        this[item.func]()
      }else if(item.url){
        window.location.href=item.url
      }else{
        this.$router.push(item.link)
      }
      
    },
    signIn(){
      this.$vux.toast.show({
        text:"企业卡定制中",
        type:"success"  
      })
    },
    done(str){
      // this.$vux.toast.show({
      //   text:str,
      //   type:"success"  
      // })
      window.location=str
    },
    jump(name){
      this.$router.push({name})
    }
  },
  components: {
    Swiper,
    Grid, GridItem,
    Panel,
    XButton,
    Marquee, MarqueeItem
  }
}
</script>

